<template>
    <div>
        <el-dialog
            :title="isAdd ? '添加秒杀活动' : '编辑秒杀活动'"
            :visible.sync="isShow"
            center
            :show-close="false"
        >
            <el-form
                :model="seckform"
                :rules="rules"
                label-position="right"
                label-width="100px"
                ref="seckform"
            >
                <el-form-item label="活动名称" prop="title">
                    <el-input v-model="seckform.title"></el-input>
                </el-form-item>
                <el-form-item label="活动期限">
                    <template slot-scope="item">
                        <el-date-picker
                            v-model="value"
                            type="datetimerange"
                            value-format="timestamp"
                            align="left"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                        >
                        </el-date-picker>
                    </template>
                </el-form-item>

                <el-form-item label="一级分类">
                    <el-select
                        v-model="seckform.first_cateid"
                        placeholder="请选择一级分类"
                        @change="seckform.second_cateid = 0"
                    >
                        <el-option
                            label="请选择"
                            :value="0"
                            disabled
                        ></el-option>
                        <el-option
                            v-for="item in catelist"
                            :key="item.id"
                            :label="item.catename"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类">
                    <el-select
                        v-model="seckform.second_cateid"
                        placeholder="请选择二级分类"
                        @change="
                            getgoodslist(
                                seckform.first_cateid,
                                seckform.second_cateid
                            )
                        "
                    >
                        <el-option
                            label="请选择"
                            :value="0"
                            disabled
                        ></el-option>
                        <template v-for="item in catelist">
                            <el-option
                                v-show="item1.pid === seckform.first_cateid"
                                v-for="item1 in item.children"
                                :key="item1.id"
                                :label="item1.catename"
                                :value="item1.id"
                            ></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品">
                    <el-select
                        v-model="seckform.goodsid"
                        placeholder="请选择商品"
                    >
                        <el-option
                            label="请选择"
                            :value="0"
                            disabled
                        ></el-option>
                        <el-option
                            v-for="item in goodslist"
                            :key="item.id"
                            :label="item.goodsname"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch
                        v-model="seckform.status"
                        active-color="#13ce66"
                        ref="upload"
                        :active-value="1"
                        :inactive-value="2"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit" v-if="isAdd"
                    >添 加</el-button
                >
                <el-button type="primary" @click="submit" v-else
                    >修 改</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Vuex from "vuex";
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            // value:[new Date(Number(this.seckform.begintime)), new Date()],
            // value:[new Date(1611158520000), new Date()],
            value:[],
            //表单的验证规则
            rules: {
                title: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 15,
                        message: "长度在 2 到 15 个字符",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    props: ["isDialog", "isAdd"],
    methods: {
        //获取goodslist
        getgoodslist(fid, sid) {
            //每次点击要把显示的内容清空
            this.seckform.goodsid = 0
            //每点击一次 需要去先把goodslist清空，再请求goodslist
            this.$store.commit("goods/setgoodslist",[])
            this.$store.dispatch("goods/goodslist_a", { fid, sid });
        },
        ...Vuex.mapMutations({
            //设置一条数据 也就是设置弹框的数据
            setseckinfo: "seck/setseckinfo",
        }),
        ...Vuex.mapActions({
            getlist: "seck/secklist_a", //获取活动列表 接口
            seckadd: "seck/seckadd_a", //获取活动添加 接口
            seckedit: "seck/seckedit_a", //获取活动添加 接口
            // catelist_a:"cate/catelist_a",//获取分类列表 接口
        }),
        //点击取消 弹框消失
        cancel() {
            this.$emit("cancel", false);
            this.reset();
        },
        //reset 重置弹框表单的数据
        reset() {
            this.setseckinfo({
                begintime: "",
                endtime: "",
                first_cateid: 0,
                goodsid: 0,
                id: 0,
                second_cateid: 0,
                status: 1,
                title: "",
            });
            this.value = []
            // 清空goodslist的方法
            this.$store.commit("goods/setgoodslist",[])
        },
        //点击添加或修改按钮提交
        submit() {
            //通过验证器判断是否符合rules规则
            this.$refs.seckform.validate((vaild) => {
                if (vaild) {
                    this.seckform.begintime = this.value[0].toString()
                    this.seckform.endtime = this.value[1].toString()

                    //vuex方法,需要去watch监听事件的变化
                    if (this.isAdd) {
                        this.seckadd(this.seckform);
                    } else {
                        this.seckedit(this.seckform);
                    }
                } else {
                    this.$message.error("输入有误");
                    this.reset();
                    return false;
                }
            });
        },
    },
    computed: {
        //获取活动列表
        ...Vuex.mapGetters({
            secklist: "seck/getsecklist",
            seckform: "seck/getseckinfo",
            seckTitle: "seck/getseckTitle",
            catelist: "cate/getcatelist", //商品分类的列表数据
            goodslist: "goods/getgoodslist", //获取商品的列表数据
        }),
        //接收传递来的prop属性，
        isShow: {
            get() {
                return this.isDialog;
            },
            set() {
                this.$emit("cancel", false);
            },
        },
    },
    watch: {
        //监听输出的内容是否变化，list组件也会受影响
        seckTitle(val) {
            if (val.code == 200) {
                this.$message.success(val.msg);
                this.cancel();
            } else {
                this.$message.error(val.msg);
                this.reset();
            }
            this.getlist();
        },
    },
};
</script>

<style scoped></style>
